import React, { Component } from 'react';
import { Select, Input, Button, Table, Switch } from 'antd';
import axios from "../../../../../../util/axios"

const { Option } = Select;
const { Search } = Input;

class Kill_goods extends Component {

    state = {
        xqdata: [],
        columns: [
            {
                title: 'ID',
                dataIndex: 'id',
                align: 'center',
                width: "70px"
            },
            {
                title: '配置',
                dataIndex: 'peizhi',
                align: 'center',
            },
            {
                title: '秒杀时段',
                dataIndex: 'mtime',
                align: 'center',
                width: "120px"
            },
            {
                title: '商品图片',
                dataIndex: 'img',
                render: url => <img src={url} alt="" style={{ width: "50px", height: "50px" }} />,
                className: 'shopImg',
                align: 'center',
                width: "90px"
            },
            {
                title: '活动标题',
                dataIndex: 'title',
                align: 'center',
            },
            {
                title: '活动简介',
                dataIndex: 'huojian',
                align: 'center',
                width: "90px"
            },
            {
                title: '原价',
                dataIndex: 'yjia',
                align: 'center',
                width: "70px"
            },
            {
                title: '秒杀价',
                dataIndex: 'mjia',
                align: 'center',
                width: "80px"
            },
            {
                title: '限量',
                dataIndex: 'xianl',
                align: 'center',
                width: "70px"
            },
            {
                title: '限量剩余',
                dataIndex: 'xianls',
                align: 'center',
                width: "70px"
            },
            {
                title: '秒杀状态',
                dataIndex: 'mzhuang',
                align: 'center',
                width: "90px"
            },
            {
                title: '状态',
                dataIndex: 'zhuang',
                render: (zhuang) => <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked={zhuang === 'false' ? false : true} />,
                align: 'center',
            },
            {
                title: '创建时间',
                dataIndex: 'time',
                align: 'center',
            },
            {
                title: '操作',
                align: 'center',
                render: (item) => <div style={{ display: "flex" }}>
                    <Button type="primary" style={{ margin: "0 5px" }}>编辑</Button>
                    <Button type="primary" danger onClick={() => { this.handleDel(item.key) }}>删除</Button>
                </div>
            },
        ]
    }

    componentDidMount() {
        this.getSeckillData()
    }

    getSeckillData() { //获取数据
        axios.get('/Secondskill').then(res => {
            console.log(res);
            this.setState({
                xqdata: res.data.data
            })
        })
    }

    onSearch = (value) => { //模糊搜索
        axios.get('/Seckillsearch', { params: { peizhi: value } }).then(res => {
            console.log(res)
            this.setState({
                xqdata: res.data.data
            })
        })
    }

    handleDel = (key) => { //删除
        axios.get('/Seckilldetile', { params: { id: key } }).then(res => {
            console.log(res);
            this.setState({
                xqdata: res.data.data
            })
        })
        this.getSeckillData()
    }

    render() {
        let { xqdata, columns } = this.state
        return (
            <div className="seckill">
                <div className="searchTop">
                    <div className="select">
                        <span>是否显示：</span>
                        <Select defaultValue="请选择" style={{ width: 200 }} onChange={this.handleChange}>
                            <Option value="开启">开启</Option>
                            <Option value="关闭">关闭</Option>
                        </Select>
                    </div>
                    <div className="search">
                        <span>商品搜索：</span>
                        <Search placeholder="请输入商品名称" onSearch={this.onSearch} style={{ width: 260 }} />
                    </div>
                </div>
                <div className="tab">
                    <Table
                        columns={columns}
                        dataSource={xqdata}
                        bordered
                        rowKey='id'
                        scroll={{ y: 540 }}
                    />
                </div>
            </div>
        );
    }
}

export default Kill_goods;
